<template>
	<div class="todo-header">
		<input
			v-model="todoName"
			type="text"
			placeholder="请输入你的任务名称，按回车键确认"
			@keyup.enter="add"
		/>
	</div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
	name: "TodoHeader",
	data() {
		return {
			// 单个组件使用的数据，定义在这个组件中
			// 多个组件共享的数据，定义在vuex里面
			todoName: "",
		};
	},
	methods: {
		...mapMutations("todoList", ["ADD_TODO"]),
		add() {
			const { todoName } = this;

			if (!todoName) {
				alert("请输入任务名称");
				return;
			}

			// 添加todo --> 给vuex中todos添加一个新数据 --> 就要考虑定义actions或mutations
			// 因为添加不需要发送请求，所以直接定义mutations即可 --> 将mutations函数映射到组件内 --> 调用
			this.ADD_TODO(todoName);

			this.todoName = "";
		},
	},
};
</script>

<style>
/*header*/
.todo-header input {
	width: 560px;
	height: 28px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px 7px;
}

.todo-header input:focus {
	outline: none;
	border-color: rgba(82, 168, 236, 0.8);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
